//显示对应的新闻图片，链接，文字
function  showPic(whichPic) {
    //显示新闻图片的对象
    var placeholder = document.getElementById("placeholder");
    //显示新闻标题和链接对象
    var description = document.getElementById("description");
    //显示图片，数据内容
    var  imgSrc = whichPic.getAttribute("data-image");
    //标题
    var newsTitle = whichPic.getAttribute("title");
    //链接地址
    var url = whichPic.getAttribute("data-url");
    console.log(imgSrc + "|" + newsTitle+"|" + url);

    //设置内容
    placeholder.setAttribute("src",imgSrc);
    description.setAttribute("href",url);
    description.innerText = newsTitle;
}

//默认显示的图片新闻
//console.log(document.getElementsByClassName("first")[0].firstChild);
showPic(document.getElementsByClassName("first")[0].firstChild);
//全局数据定义
//图片新闻数据集合
var newsPicArray=getNewsPicArray(document.getElementsByClassName("first")[0]);
// console.log(newsPicArray);
var len=newsPicArray.length;
//定时器开关标志
var flag;
//图片轮播开始位置
var current=0;
//1.显示对应新闻图片，标题，链接
function showPic(whichPic) {
//显示新闻图片的对象
    var placeholder=document.getElementById("placeholder");
//显示新闻标题和链接的对象
    var description=document.getElementById("description");
//    显示内容数据
//    图片
    var imgScr=whichPic.getAttribute("data-image");
//    标题
    var newsTitle=whichPic.getAttribute("title");
//    链接地址
    var url=whichPic.getAttribute("data-url");
    console.log(imgScr+"|"+newsTitle+"|"+url);
//    设置内容
    placeholder.setAttribute("src",imgScr);
    description.setAttribute("href",url);
    description.innerText=newsTitle;
    //播哪张图片，下面背景变成红色
    whichPic.parentElement.style.backgroundColor="#ff1510"
}
//默认显示的图片新闻 获得li.first的子标签a
//2. console.log(document.getElementsByClassName("first")[0].firstChild);
showPic(document.getElementsByClassName("first")[0].firstChild);
//3.图片轮播（定时器）setTimeout();setInterval();
//3.1获取图片新闻的相关数据，访问图片新闻（li）,相关数据存放到集合中
function getNewsPicArray(cur) {
    var _arr=[];
    //当节点存在并且
    while (cur&&cur.nodeType===1){
        _arr.push(cur);
        cur=cur.nextElementSibling;
    }
    return _arr;
}
//3.2图片新闻轮播展示
function circleShowPic() {
    showPic(newsPicArray[current].firstChild);
    flag=setInterval(function () {
        current=++current>len-1?0:current;
        showPic(newsPicArray[current].firstChild);
        newsPicArray[current===0?len-1:current-1].removeAttribute("style");
    },2000);
//   1000毫秒=1秒
}

//4.更改后的a标签点击处理：更新开始图片轮播（重置定时器）
function clickShowPic(whichPic) {
    //停止定时器
    clearInterval(flag);
    //去除图片轮播中当前li标签的背景颜色
    newsPicArray[current].removeAttribute("style");
    //获取点击的索引,利用a标签的文本信息
    current=parseInt(whichPic.innerText)-1;
    //开始定时器
    circleShowPic();
}
circleShowPic();
